<template>
  <div class="text-convert-img">
    <div v-if="props.src" class="content-img" :style="'width:' + width + 'px; height:' + height + 'px;'">
      <el-popover placement="right" width="auto" trigger="click">
        <template #reference>
          <el-image :src="props.src" fit="scale-down" :style="'max-width:' + width + 'px; max-height:' + height + 'px;'" />
        </template>
        <div class="enlarge-image">
          <a :href="enlargeImageSrc" target="_blank"><el-image :src="enlargeImageSrc" class="size-full" fit="contain" /></a>
        </div>
      </el-popover>
    </div>
    <div
      v-else
      class="content-text content-center text-center text-cyan-50"
      :style="'width:' + width + 'px; height:' + height + 'px; font-size:' + fontSize + 'px'"
    >
      <span v-text="textFirst"></span>
    </div>
  </div>
</template>
<script setup lang="ts">
import { computed } from 'vue'

interface Props {
  src: string
  text: string
  width: number
  height: number
}
const props = withDefaults(defineProps<Props>(), {
  src: '',
  text: '-',
  width: 78,
  height: 78,
})
const enlargeImageSrc = computed(() => {
  if(props.src.includes('UL120')) {
    return props.src.replace('UL120', 'UL800')
  }
  return props.src
})
const textFirst = computed(() => {
  return props.text.substring(0, 1)
})
const fontSize = computed(() => {
  return ~~props.width / 2
})
</script>

<style scoped lang="scss"></style>
